<template>
	<view class="page">
		<view class="service-list">
			<view class="service-item" v-for="item in serviceList" :key="item.id" @click="toDetail(item.id)">
				<view class="service-left">
					<image class="service-image" :src="getImageUrl(item.img)"></image>
				</view>
				<view class="service-right">
					<view class="service-title">{{item.title}}</view>
					<view class="service-left-button">
						<view class="service-date">
							<view>{{formatDate(item.start_time)}}</view>
							<view>~</view>
							<view>{{formatDate(item.end_time)}}</view>
						</view>
					</view>
					<view>
						<view v-if="item.applyStatus === 1">已报名</view>
						<view v-else>未报名</view>
					</view>
				</view>
			</view> 
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				param:{},
				serviceList:[{
					id:3,
					img:'Uploads/2021-12-27/61c9e242365cd.png',
					start_time: "2021-12-27 00:00:00",
					end_time: "2021-12-30 00:00:00",
					content: "&lt;p&gt;dfdsfdsaf&lt;/p&gt;",
					atime: "2021-12-27 23:56:50",
					title: "接服务测试成都市测试测试test"
				}]
			}
		},
		methods: {
			getServiceList(){
				this.param.token = uni.getStorageSync("token");
				this.http.get({
					url:'/index.php/Wxapp/Bussniss/getList',
					data:this.param
				}).then(resp=>{
					this.serviceList = resp.bussnissList;
					console.log("服务列表：",resp.bussnissList)
				}).catch(err=>{
					console.log("请求服务列表失败：",err)
				})
			},
			getImageUrl(src){
				return this.domain + src;
			},
			formatDate(date){
				if(date == null){
					return null
				} 
				
				return date.length > 10? date.substr(0,10) : date
			},
			toDetail(id){
				uni.navigateTo({
					url:"/pages/index/services/detail/detail?id=" + id
				})
			},
		},
		onLoad() {
			this.getServiceList()
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		width: 100vw;
		min-height: 100vh;
		height: 100%;
		display: flex;
		justify-content: center;
		background: #eee;
	}
	.service-list {
		width: calc(100% - 20rpx);
		height: auto;
		padding: 10rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		.service-item {
			width: 100%;
			height: 170rpx;
			margin-top: 10rpx;
			padding: 10rpx;
			display: flex;
			flex-direction: row;
			border-radius: 20rpx;
			background: #fff;
			box-shadow: 0 1px 2px -2px #00000029,0 3px 6px #0000001f,0 5px 12px 4px #00000017;
			.service-left {
				width: 35%;
				.service-image {
					height: 100%;
					border-radius: 10rpx ;
				}
			}
			.service-right {
				flex: 1;
				margin: 10rpx 20rpx;
				.service-title {
					text-overflow: ellipsis;
					overflow: hidden;
					white-space: nowrap;
					font-size: 30rpx;
					margin: 5rpx 0;
				}
				.service-left-button {
					display: flex;
					width: 100%;
					.service-date {
						display: flex;
						width: 100%;
						margin: 5rpx 0;
						color: #999;
						margin-top: 15rpx;
					}
				}
			}
		}
	}
</style>
